<template>
  <mars-dialog :draggable="true" title="卫星管理" :width="380" :height="500" :position="{ top: 60, left: 10 }">
    <mars-table
      size="small"
      :customRow="customTableRow"
      :rowSelection="{ selectedRowKeys, onChange }"
      bordered
      :rowKey="(item) => item.name"
      :pagination="{ pageSize: 10 }"
      :columns="columns"
      :dataSource="satelliteList"
      :scroll="{ y: 300 }"
    >
      <template #bodyCell="{ column, text, index }">
        <template v-if="column.dataIndex === 'name'">
          <a href="" target="_black">{{ text }}</a>
        </template>

        <template v-if="column.dataIndex === 'info'">
          {{
            `${data[index].info.year}年，第${data[index].info.frequency}次发射的第${data[index].info.sort}颗卫星，${data[index].info.tle_year}年${data[index].info.tle_day}天公开tle信息`
          }}
        </template>
      </template>
    </mars-table>
  </mars-dialog>
</template>

<script setup>
import { useStore } from "vuex"

import useLifecycle from "@/common/uses/use-lifecycle"
import * as mapWork from "./map"
import { useWidget } from "@/common/store/widget"

import satelliteList from "./satellite_list.json"
import { ref, toRaw, toValue, watch } from "vue"

// 启用map.ts生命周期
useLifecycle(mapWork)

const selectedRowKeys = ref([])

watch(selectedRowKeys, (v) => {
  const ids = toRaw(v)
  const showList = []
  satelliteList.forEach((item) => {
    ids.forEach((id) => {
      if (id === item.name) {
        showList.push(item)
      }
    })
  })
  // console.log(showList)
  mapWork.deploySatellite(showList)
})

const onChange = (keys) => {
  selectedRowKeys.value = keys
}

// 点击表格列表的行
const customTableRow = (selectedRow) => {
  return {
    onClick: (row) => {
      console.log("点击表格的行：" + selectedRow)
    }
  }
}

const store = useStore()
const { activate, disable, isActivate, updateWidget } = useWidget()

const columns = [
  {
    title: "卫星",
    dataIndex: "name",
    width: 75
  },
  {
    title: "信息",
    dataIndex: "info"
  }
]

const data = satelliteList
</script>
<style lang="less" scoped></style>
